{% extends "base.html" %}

{% block main %}
<div id="wrap"><div id="wrap-inner">
        <div id="content" class="group">
            <div class="notice-alert">
                <h3><!-- message goes here --></h3>
                <a href="#" class="close">
                    <img alt="Icon-x-30-white" src="SignUpForm_files/icon-x-30-white.png" width="15">
                </a>
            </div>

            <div class="full">
                <h1 class="alt"> 注册 </h1>
                <p>远亲不如近邻，加入[好邻居]让生活更加美好!</p>
            </div>

            <div id="main">
                <div class="signup-form">
                    <form accept-charset="UTF-8" action="/accounts/signup/step2/" class=" gen-form with-messages signup" id="new_user" method="post">
                        {% csrf_token %}
                        {% if form.errors %}
                        <div class="errorExplanation" id="errorExplanation">
                            <h2>亲,出错啦~</h2>
                            <ul>
                                {% for e in form.errors %}
                                <li>{{e.errors}}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        <input id="door" name="door" value="designers" type="hidden">
                        <input id="user_prospect" name="user[prospect]" value="true" type="hidden">

                        <h2 class="section">创建账号</h2>
                        <div class="form-field">
                            <fieldset id="f_user_name" class="user_login {% if form.errors %}fieldWithErrors{% endif %}">
                                <label for="Username">用户名</label>
                                <input autocapitalize="off" autocorrect="off" id="user_name" label="Username" name="username" size="30" value="" type="text">
                            </fieldset>
                            <p id="m_user_name" class="message"> 您将用此账号名登录好邻居</p>
                        </div>

                        <div class="form-field">
                            <fieldset class="user_password">
                                <label for="user_password">密码</label>
                                <input id="user_password1" label="Password" name="password1" size="30" type="password"></fieldset>
                            <p class="message">设置密码,不少于6个字</p>
                        </div>

                        <div class="form-field">
                            <fieldset class="user_password">
                                <label for="user_password">确认密码</label>
                                <input id="user_password2" label="Password" name="password2" size="30" type="password"></fieldset>
                            <p id="m_user_password2" class="message">请再次输入您的密码，确保两次输入一致</p>
                        </div>

                        <script>
                            $(document).ready(function(){
                                $("#user_name").blur(function(){
                                    $.getJSON("/accounts/check/"+ this.value + "/", function(result){
                                        if (result.ret == "fail"){
                                            $("#m_user_name").html("<font color='red'>账号已经存在</font>");
                                        }
                                        else{
                                            $("#m_user_name").html("<font color='green'>账号可用</font>");
                                        }
                                    })
                                });
                                $("#user_password2").blur(function(){
                                    if (this.value != $("#user_password1").val()){
                                        $("#m_user_password2").html("<font color='red'>两次输入的密码不一致</font>");
                                    }
                                    else{
                                        $("#m_user_password2").html("<font color='green'>密码输入正确</font>");
                                    }
                                })
                            })
                        </script>
                        <!--
                        <div class="form-field">
                            <fieldset class="user_login">
                                <label for="user_captcha">验证码</label>
                                {{form.captcha}}
                            </fieldset>
                            <p class="message">不少于6个字</p>
                        </div>
                        -->

                        <div class="form-btns">
                            <input class="form-sub" name="commit" value="创建账号" type="submit">
                        </div>
                    </form>	
                </div>

                <div class="col-about col-about-full hide">
                    <h2 class="section">As a Prospect you’ll be able to…</h2>
                    <ol class="gridsies gridsies-halfsies group">
                        <li>
                        <img alt="About-find" class="fig" src="SignUpForm_files/about-find.png">
                        <h3>Find &amp; follow</h3>
                        <p>Discover designers and the projects they’re working on.</p>
                        </li>
                        <li>
                        <img alt="About-like" class="fig" src="SignUpForm_files/about-like.png">
                        <h3>Save your faves</h3>
                        <p>Create an inspiration stream from your favorite shots.</p>
                        </li>
                        <li>
                        <img alt="About-bucket" class="fig" src="SignUpForm_files/about-bucket.png">
                        <h3>Create buckets</h3>
                        <p>Save and organize shots from any player into <a href="https://dribbble.com/site/faq#faq-buckets" target="_blank">Buckets</a>.</p>
                        </li>
                        <li>
                        <img alt="About-prospect" class="fig" src="SignUpForm_files/about-prospect.png">
                        <h3>Get Drafted</h3>
                        <p>Let the community know you'd like to be a player (members who upload and comment).</p>
                        </li>
                        <li>
                        <img alt="Pro-badge" class="fig" src="SignUpForm_files/pro-badge.png">
                        <h3>Go Pro</h3>
                        <p>Unlock Pro Search to <a href="https://dribbble.com/designers">Find Designers</a> by location, skills, and availability.</p>
                        </li>
                    </ol>
                </div>
            </div>

            <div class="secondary">

                <h3>有疑问?</h3>
                <p class="copy">请参考 <strong><a href="#">FAQ</a></strong> 获取关于创建账号方面的内容.</p>

            </div>

        </div> <!-- /content -->
</div></div> <!-- /wrap -->

{% endblock %}


